<!-- 数据信息 -->
<template>
  <div id="dialog-container">
    <!-- <el-button type="primary" plain @click="dialogVisible = true">数据信息</el-button> -->
    <el-dialog v-dialogDrag title="数据信息" append-to-body :visible.sync="dialogVisible"  @close="$emit('update:show', false)" width="660px" :close-on-click-modal="false">
      <el-button size="small" type="primary" @click="getExcel()">导出</el-button>
      <h2 style="text-align: center;">人员任务完成及时率</h2>
      <h3 style="text-align: center;"  v-if="startTime != ''">{{this.startTime}}至{{this.endTime}}</h3><br>
      <el-table :data="tableData" border size="">
        <!-- <el-table-column prop="date" align="center" label="时间" min-width="100"> -->
          <el-table-column prop="name" align="center" label="人员" min-width="100"></el-table-column>
        <!-- </el-table-column> -->
        <!-- <el-table-column align="center" label="2018.6.7~2018.6.27"> -->
          <el-table-column prop="rate" align="center" label="完成及时率" min-width="100"></el-table-column>
          <el-table-column prop="date" align="center" label="操作" min-width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="detail(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        <!-- </el-table-column> -->
      </el-table>
      <look-detail :show.sync="isShowDetail" :modifyId='orderId' :dataEnd='fromDateEnd' :stDate='toDateEnd'></look-detail>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
      getPersonCompletionRate
  } from "service/task";
  import LookDetail from './look-detail';
  export default {
    components: {
      'look-detail': LookDetail
    },
    data() {
      return {
        dialogVisible: false,
        isShowDetail: false,
        startTime:"",
        endTime:"",
        orderId:"",
        fromDateEnd:"",
        toDateEnd:"",
        tableData: []
      }
    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        modifyId:{
            type: String 
        },
        dataEnd:{
           type: String
        },
        stDate:{
           type: String
        }
    }, 
    watch: {
        show() {
            this.getListTableData();
            this.dialogVisible = this.show;
            this.startTime = this.dataEnd.slice(0,10);
            this.endTime = this.stDate.slice(0,10);
            this.tableData = [];
        }
    },
    methods: {
      getExcel() {
        window.location.href= `${process.env.API_URL}` + "report/getPersonCompletionRateExcel?acceptUid=" + this.modifyId
         + "&startDate=" + this.dataEnd + "&endDate=" + this.stDate;
      },
      detail(row) {
        this.orderId = row.operateid;//[0].name
        this.fromDateEnd = this.dataEnd;
        this.toDateEnd = this.stDate;
        this.isShowDetail = true;
      },
      getListTableData(){
            getPersonCompletionRate({
              acceptUid: this.modifyId,
              fromDate: this.dataEnd,
              toDate: this.stDate
            }).then(res => {
              this.tableData = res.data.result.list;
            })
      }
    }
  }

</script>
